<template>
  <div class="daily-box">
    <div class="item-group">
      <div class="content">
        <h2>A</h2>
        <div class="title">{{ info.title }}</div>
        <div class="desc">{{ info.desc }}</div>
        <a :href="info.href" target="_blank" class="button-group"> 点击进入 </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Box",
  props: {
    info: {
      type: Object,
      default: () => ({
        title: "title",
        desc: "desc",
        href: "#",
      }),
    },
  },
};
</script>

<style lang="less" scoped>
.daily-box {
  width: 227px;
  height: 322px;
  position: relative;
  z-index: 1;
  .item-group {
    position: relative;
    height: 100%;
    display: flex;
    background: #1a252ffa;
    justify-content: center;
    align-items: center;
    border: 1px solid #1a252ffa;
    .content {
      position: relative;
      padding: 20px;
      transform: translateY(26px);
      h2 {
        position: absolute;
        top: 50px;
        right: 10px;
        font-size: 14em;
        color: rgba(255, 255, 255, 0.06);
        transition: 0.5s;
      }
      .title {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
      }
      .desc {
        color: #fff;
      }
      .button-group {
        position: relative;
        margin-top: 20px;
        padding: 1px 20px;
        border: 1px solid #fff;
        display: inline-block;
        transition: 0.5s;
        transform: translateY(-40px);
        opacity: 0;
        visibility: hidden;
        color: #fff;
        font-size: 12px;
      }
    }
  }
  .item-group:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #fff;
    transform: skew(2deg, 2deg);
    z-index: -1;
  }

  // .item-group:nth-child(1):before {
  //   background: linear-gradient(315deg, #ff0055, #da4112);
  // }
  // .item-group:nth-child(1):before {
  //   background: linear-gradient(315deg, #06b36b, #19e63b);
  // }
  .item-group:nth-child(1):before {
    background: linear-gradient(315deg, #7108ad, #db1869);
  }
  // .item-group:nth-child(1):before {
  //   background: linear-gradient(315deg, #eecb04, #e62019);
  // }

  .item-group:hover .content h2 {
    top: -10px;
  }

  .item-group:hover .content .button-group {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .item-group .content .button-group:hover {
    color: #000;
    background: #fff;
  }
}
</style>